<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=\, initial-scale=1.0" />
    <title>利用 CSS 开发新闻列表</title>
    <style>
      /* 清除格式 */
      body,
      h3,
      ul {
        margin: 0;
        padding: 0;
      }
      a {
        text-decoration: none;
        color: initial;
      }
      ul {
        list-style: none;
      }

      /* 格式 */
      .news {
        width: 360px;
        /* height: 600px; */

        margin: 50px auto 0px;
        border: 1px solid #ddd;
        padding: 15px;
        /* background-color: red; */
      }

      .news h3 {
        line-height: 20px;
        font-size: 20px;

        margin-bottom: 20px;
      }

      .news ul li {
        height: 35px;
        line-height: 35px;
        font-size: 16px;
        color: #333;

        border-bottom: 1px solid #ddd;
      }

      .news ul li a:hover {
        color: #ff5c55;
      }

      .news ul li span {
        font-weight: bold;

        margin-right: 10px;
      }

      .color1 {
        color: red;
      }

      .color2 {
        color: #ff5c55;
      }
      .color3 {
        color: #ffa552;
      }
    </style>
  </head>
  <body>
    <div class="news">
      <h3>百度新闻热榜</h3>
      <ul>
        <li>
          <a href=""
            ><span class="color1">1</span>印度列车相撞事故已致207死900伤</a
          >
        </li>
        <li>
          <a href=""
            ><span class="color2">2</span>美防长跨越2座位主动与中国防长握手</a
          >
        </li>
        <li>
          <a href=""><span class="color3">3</span>高考前心理调适指南请查收</a>
        </li>
        <li>
          <a href=""><span>4</span>张雪峰公司将实行4天工作制</a>
        </li>
        <li>
          <a href=""><span>5</span>多个账号网暴被撞小学生母亲被封</a>
        </li>
        <li>
          <a href=""><span>6</span>校内被撞身亡小学生母亲坠楼身亡</a>
        </li>
        <li>
          <a href=""><span>7</span>科技大佬排队来华:不能失去中国市场</a>
        </li>
        <li>
          <a href=""><span>8</span>律师：网暴被撞男孩母亲者可负刑责</a>
        </li>
        <li>
          <a href=""><span>9</span>河南多县抢收小麦 人休息机器不休息</a>
        </li>
        <li><a href=""></a></li>
      </ul>
    </div>
  </body>
</html>
